El efecto hover cambia el aspecto de un elemento cuando se sitúa el puntero sin que sea seleccionado y vuelve a su estado original cuando se retira el puntero.
Para el ejemplo he añadido los estilos de borde que tengo en las imágenes de mis entradas, de esa forma respondo al mismo tiempo a los que me preguntaron por ese detalle.
La diferencia está que para añadir los estilos a las imágenes de los post lo hacemos en:.post img {
......
......
......
}
Si deseamos añadir un borde a las imágenes añadimos antes de ]]></b:skin>
.border img{
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-khtml-border-radius: 5px;
padding: 5px;
background: #ffffff;
border-top: 1px solid #969696;
border-left: 1px solid #969696;
-moz-box-shadow: 2px 2px 4px #696969;
-webkit-box-shadow:2px 2px 4px #696969;
box-shadow:2px 2px 4px #696969;
}
Y en una entrada o gadget de html añadimos:
<div class="border"><img src="url-imagen"/></div>
La imagen se vería de esta forma.
Si además de los estilos para el borde añadimos unos estilos para el efecto hover la misma imagen al pasar el puntero mostraría los nuevos estilos.
.hover img:hover {
padding: 5px;
background:#ffffff;
border-top: 1px solid #475E0B;
border-left: 1px solid #475E0B;
-moz-box-shadow: 2px 2px 4px #9C192A;
-webkit-box-shadow:2px 2px 4px #9C192A;
box-shadow:2px 2px 4px #9C192A;
}
Ver ejemplo 1
ESTILOS [+/-]
Ver ejemplo 2
ESTILOS [+/-]
Ver ejemplo 3
ESTILOS [+/-]
Exente esta esta entrada Ahora A Probarlo
En firefox (y supongo que en safari) se ve muy bien, queda un exelente efecto
En IExplorer solo se ve bien en la versio 8, es una lastima porque el efecto es muy bonito.
Hay que esperar a que todos los navegadores reconozcan el CSS y se estandaricen
gracias gem@, aprendo muchisimo aca!
gracias otra vez x compartir
agrego q con Chrome tambien se ve genial
Que buen efecto Gema ya lo habia visto x otros blog, lastima que a mi no me resulto
Hola Gema! Feliz año! gracias por este truco tan bueno.
Hola, eh buscado y e intentado como enmarcar, poner un borde o un separador entre los comentarios pero aun no doy con el resultado y creo que no me vendria mal un poco de ayuda jeje.
Espero y puedas ayudarme
Muchas Gracias
Saludos...
Es lo que estaba buscando, pero no sabía el nombre y apellido
Bárbaro Piedra Preciosa, lo aplicaré en la sidebar, entonces tendré que pensar.
Estoy cuidando a dos pequeños, la mamá ha salido, pintan y me cuentan minuto a minuto lo que hacen jajaja para concentrarme!!!
Besos!!!
Los artistas te acaparan
No si he seguido tus pasos a pie de letra, si no me resulta es por que tengo un tipo de cursor distinto que las imagenes las tiene con opacidad, entonces para poder agregar este efecto debo borrar el que tengo y asi se vera...
ea! muchas gracias! me gusta mucho ese efecto y lo encontre por casualidad, ya he usado un par de trucos tuyos muy útiles.
oye como veo que mucha gente te hace consultas y les ayudas, espero me ayudes a mi también:
en mi blog, en las entradas, por mas que le cambio el formato de la letra, siempre queda super chiquita, no se a qué se deba, sabes algo de eso? no se si le pueda poner un formato default a todo el blog desde la plantilla, o alguna sugerencia?
Wowowow!!
siempre dando mucho mas de lo que te piden. Muchas gracias por tu ayuda Gema. 
Genial explicación; Voy a probarlo ahora mismo.
Lo eliminé porque quería poner la cara de asombro ( :0 ) no me salia y siguió sin salirme en el segundo comentario que hice.
jajaja esta mañana me dispongo -luego de sacar un poco de tierra, hojas y demás que dejó el bendito viento sur-
¿a que no sabes qué?
Nuevamente los dos a pintar y dibujar, bien les doy las hojas, lápices, lapiceras...a cada rato 'tía mira lo que dibujé!!!
'tía te hago un auto: quieres fórmula 1, 2 o 3
Enterada solo de la l, dije quiero una Ferrari, ahí la tuve, roja y las explicaciones...me quedo asombrada, el mayor tiene 5 y el menor 3.
Son los artistas que hacen que vuelva a la infancia
Yo estoy con envidia sana porque cada vez que voy al blog de Graciela veo que ha hecho algo nuevo!!! y yo que no tengo cuerpo ahora para meterme con la plantilla que le haría falta...
pero voy apuntando ideas, eh?
tiembla Gema cuando me de por hacer cambios jajaja
Hola Gem@ !!!
Mirando esta entrada veo que al pinchar en cualquiera de las imágenes que tienes en los ejemplos, te sale una venta sombreado en gris oscuro con la imagen, el título y la X para cerrar dicha ventana.
¿Tienes explicado este truco? Es que que ya he utlizado varios trucos de este estilo en mi blog y no me funciona ninguno. Queía probar con éste.
Gracias
Ya vendrá lo de fútbol supongo, aunque la mamá no los ha enviado aún.
vamos que haces cosas bellísimas, que aún no he conseguido aprender.
Frente a mi casa tengo una cancha de fútbol, pero maltratan a los niños, ella ha decidido no enviarlos y la tía recontenta
Piedra Preciosa has leído que le 'regalamos a Messi' jajaja "de madera" en nuestra selección, ahora la madre ha realizado declaraciones de que no le queremos; de Fútbol nada io
Minimimo I
Besos a las dos!!!
http://gemablog-.blogspot.com/2009/05/lytebox-otra-forma.html
y los resultados:
http://forevergema.blogspot.com/search/label/Lytebox
Tesoro te pregunto:
si deseo aplicar el efecto 1 por ejemplo, la parte del html, la tengo en la sidebar en la historia de la semana, la imagen necesita el link...cómo se hace???
Muchas gracias
.border1 img{
padding: 5px;
background: #ffffff;
border-top: 1px solid #54692A;
border-left: 1px solid #54692A;
-moz-box-shadow: 2px 2px 4px #696969;
-webkit-box-shadow:2px 2px 4px #696969;
box-shadow:2px 2px 4px #696969;
}
.border1 img:hover {
padding: 2px;
background:#FFFFFF;
border: 4px double #9C192A;
-moz-box-shadow: 2px 2px 4px #9C192A;
-webkit-box-shadow:2px 2px 4px #9C192A;
box-shadow:2px 2px 4px #9C192A;
}
Y luego en la entrada donde vamos a añadir la imagen añadimos lo siguiente:
<div class="border1"><img src="url-de-la-imagen"/></div>
Donde dice url-de-la-imagen es el sitio donde pegaremos la url de la imagen a la que deseamos añadir el efecto
Piedra Preciosa he intentado con todos los ejemplos y nada...
en la cajita de la sidebar añado
div class="border1" img src="url-de-la-imagen div
tal como lo dices claro, si pongo todo error html en el coments
gracias!!!
snif snif antes pude apreciar lo bonito que te ha quedado, bien reduje el tamaño y nada
No se deja Piedra Preciosa
Tal como lo dices, si pongo en una entrada hace el efecto, en la sidebar no
forevergema(arroba)gmail.com
Esta genial, le quedo muy bien a mi blog, Cracias
Olle amix genial el aporte, vas a mis favoritos en mi blog...
Ahora mi pregunta es, de casualidad sabes como ponerle un limite o un bormde a mis entradas en la pagina e inicio para que no se vea cargado sino delimitado?'
muchas gracias ...
Te y los invito a que visiten mi blog http://atiiempo.blogspot.com/
On Time 2.0
ComenteN,Ayuden, Compartan y Diviértanse...
Salu2.
Muchas Gracias me sirvio para la pagina web
http://www.colombiaguide.co
Hola que tal, tengo una inquietud desde hace rato con respecto al efecto hover del borde en una image: cuando paso el mouse po encima, pega como un salto la imagen. ¿Hay alguna forma de que no pegue ese salto?
Nota: solo los miembros de este blog pueden publicar comentarios.